<template>
  <div>
    <!-- 跟进详情 -->
    <el-dialog
      v-model="openFollowDetail"
      :close-on-click-modal="false"
      title="跟进详情"
      width="800px"
    >
      <el-row v-if="!followDetailWritten" :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button type="primary" icon="el-icon-plus" @click="handleAddFollowDetail">新增</el-button>
        </el-col>
      </el-row>
      <el-table v-loading="loading" border :data="followDetail">
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <!-- <el-table-column type="index" label="跟进次数" align="center" width="80"></el-table-column> -->
        <el-table-column
          align="center"
          label="跟进内容"
          prop="followUpContent"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          align="center"
          label="跟进方式"
          prop="followUpMethod"
          :formatter="methodsFormatter"
        ></el-table-column>
        <el-table-column
          align="center"
          label="跟进结果"
          prop="followUpResults"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          align="center"
          label="操作人"
          prop="operationPerson"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column align="center" label="操作时间" prop="operationTime"></el-table-column>
        <el-table-column
          v-if="!followDetailWritten"
          align="center"
          label="操作"
          fixed="right"
          width="100"
        >
          <template #default="{ row }">
            <!-- <el-button text @click="handleUpdateFollowDetail(row)">修改</el-button>
						<el-button text @click="handleDeleteFollowDetail(row)">删除</el-button> -->
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <!-- 跟进详情——新增、修改 -->
    <el-dialog
      v-model="openFollowDetailForm"
      :close-on-click-modal="false"
      :title="followDetailFormTitle"
      width="500px"
    >
      <el-form
        ref="editDetailForm"
        inline
        :model="followDetailForm"
        :rules="followDetailRules"
        label-width="85px"
      >
        <el-form-item label="跟进内容" prop="followUpContent">
          <el-input
            v-model="followDetailForm.followUpContent"
            placeholder="请输入跟进内容"
            clearable
            size="small"
            style="width: 240px;
"
          ></el-input>
        </el-form-item>
        <el-form-item label="跟进方式" prop="followUpMethod">
          <el-select v-model="followDetailForm.followUpMethod">
            <el-option label="电话" value="0"></el-option>
            <el-option label="上门" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="跟进结果" prop="followUpResults">
          <el-input
            v-model="followDetailForm.followUpResults"
            placeholder="请输入跟进结果"
            clearable
            size="small"
            style="width: 240px;"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="primary" @click="submitFollowDetailForm">确定</el-button>
        <el-button @click="openFollowDetailForm = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import { ref, getCurrentInstance, defineProps, proxyRefs } from 'vue'
import { ElButton, ElMessageBox, ElMessage, ElSwitch } from 'element-plus'
import {
  getCustomerData,
  setCustomerAdd,
  setCustomerDel,
  setCustomerUpdate,
  setCustomerFollow,
  getFollowPool,
  setStatus,
  getFollowDetail,
  addFollowDetail,
  editFollowDetail,
  delFollowDetail,
  listUserTab,
  setDistribute,
} from '@/api/customerAnalysis'

const props = defineProps({
  userInfoList: {
    type: String,
  },
})
console.log(props.userInfoList)
// 跟进详情表单状态
let openFollowDetail = ref(false),
  followDetailWritten = ref(false),
  loading = ref(false),
  followDetail = ref([]),
  // 新增跟进详情状态
  openFollowDetailForm = ref(false),
  // 标题
  followDetailFormTitle = ref(null),
  // 跟进详情表单
  followDetailForm = ref({
    customerPoolId: undefined,
    followUpContent: undefined,
    followUpMethod: undefined,
    followUpResults: undefined,
    deptId: undefined,
  }),
  // 跟进详情表单验证
  followDetailRules = ref({
    followUpContent: [{ required: true, message: '请输入跟进内容' }],
    followUpMethod: [{ required: true, message: '请输入跟进方式' }],
    followUpResults: [{ required: true, message: '请输入跟进结果' }],
  }),
  // 跟进详情
  editDetailForm = ref(null),
  {
    appContext: {
      config: {
        globalProperties: { $resetForm, $validateForm },
      },
    },
  } = getCurrentInstance()
// 跟进方式格式化
const methodsFormatter = (row, column) => (row[column.property] == 0 ? '电话' : row[column.property] == 1 ? '上门' : '')
// 跟进详情——新增
const handleAddFollowDetail = () => {
  reset()
  openFollowDetailForm.value = true
  followDetailFormTitle.value = '新增'
}
// 重置跟进详情表单
const reset = () => {
  followDetailForm.value = {
    customerPoolId: undefined,
    followUpContent: undefined,
    followUpMethod: undefined,
    followUpResults: undefined,
    deptId: undefined,
  }
  $resetForm(editDetailForm.value)
}
const { proxy } = getCurrentInstance() as any
// 跟进详情新增提交
const submitFollowDetailForm = () => {
  $validateForm(followDetailForm.value, () => {
    followDetailForm.value.deptId = userInfoList
    addFollowDetail(followDetailForm.value).then((res) => {
      if (res.code == 200) {
        ElMessage.success('新增成功')
        openFollowDetailForm.value = false
        proxy.handleFollowDetail(followDetailForm.value)
        reset()
      } else {
        const { followUpMethod } = followDetailForm.value
        if (typeof followUpMethod == 'string') {
          followDetailForm.value.followUpMethod = followUpMethod == '电话' ? 0 : followUpMethod == '上门' ? 0 : ''
        }
        editFollowDetail(followDetailForm.value).then((res) => {
          if (res.code == 200) {
            ElMessage.success('修改成功')
            openFollowDetailForm.value = false
            proxy.handleFollowDetail(followDetailForm.value)
            reset()
          }
        })
      }
    })
  })
}
// 跟进详情
const getList = (id) => {
  getFollowDetail(id).then((res) => {
    if (res.code == 200) {
      followDetail.value = res.rows
      openFollowDetail.value = true
    }
  })
}
defineExpose({
  followDetailWritten,
  followDetailForm,
  followDetail,
  openFollowDetail,
  getList,
})
</script>
